<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <ScaleScreen
      :width="1920"
      :height="1080"
      class="down-scale-wrap"
      :selfAdaption="$store.state.setting.isScale">
    <div class="down-bg">
      <div class="down-host-body">
        <div class="down-d-flex down-jc-center down-title_wrap">
          <div class="down-zuojuxing"></div>
          <div class="down-youjuxing"></div>
          <div class="down-guang"></div>
          <div class="down-d-flex down-jc-center">
            <div class="down-title">
              <span class="down-title-text"> “天-地-孔”一体化监测平台</span>
            </div>
          </div>
        </div>
        <div class="down-contents">
          <div class="down-contetn_left">
            <ItemWrap class="down-contetn_left-top down-contetn_lr-item" title="地面测量列表">
              <LeftTop @selectImage="updateImage"/>
            </ItemWrap>
          </div>

          <div class="down-contetn_center">
            <ItemWrap class="down-contetn_center-bottom" title="信息详情">
              <CenterBottom :imageUrl="imageUrl"/>
            </ItemWrap>
          </div>
        </div>
      </div>
    </div>
  </ScaleScreen>



</template>

<script>
import Setting from "@/views/setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
import LeftTop from './menu-list-ground.vue'
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./ImageList.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";

export default {
  components: {
    Setting,
    ScaleScreen,
    LeftTop,
    LeftCenter,
    LeftBottom,
    CenterMap,
    RightTop,
    RightCenter,
    RightBottom,
    CenterBottom,
  },
  data() {
    return {
        imageUrl: ' ' // 初始化为空，等待事件更新
      };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() {},
  methods: {
    updateImage(image) {
      this.imageUrl = image; // 更新 imageUrl，这会传递到 CenterBottom 组件
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./down-home.scss";
// 内容
.down-contents {
  display: flex;
  height: 100%;
  width: 95%;
  .down-contetn_left{
    flex: 2;
  }
  .down-contetn_center {
    flex: 7;
  }
}
.button-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.button {
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
